<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript与新前端-技术分享</title>
    <meta name="Description" content="JavaScript与新前端-技术分享">
</head>

<body>
    <div id="app">
        <div class="panel firstpage">
            <div class="title-text">
                <h1>JavaScript与新前端 技术分享</h1>
                <h2>
                    <div class="circle">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    纷羽 / 微光网络工作室
                </h2>
            </div>
        </div>
        <div class="panel">
            <div class="secondpage">
                <h1>版权声明</h1>
                <ul>
                    <li>
                        部分图片素材来源于 <a href="https://alpha.wallhaven.cc/">wallhaven</a>
                    </li>
                    <li>
                        部分影像素材来源于 大连东软信息学院新闻社
                    </li>
                    <li>
                        内容版权归属 <a href="https://shimmer.neusoft.edu.cn/">微光网络工作室</a>
                    </li>
                    <li>
                        内容仅用于大连东软信息学院内部技术分享
                    </li>
                </ul>

                <ul style="display:none;">
                    <li>
                        纷羽<a href="https://shimmer.neusoft.edu.cn/">微光网络工作室</a>后端成员
                    </li>
                    <li>
                        不会设计的后端工程师不是好全栈（错乱）
                    </li>
                    <li>
                        内容仅用于大连东软信息学院内部技术分享
                    </li>
                </ul>
                <h3 class="bottom">
                    Flow me at &nbsp;<a href="https://gitee.com/FenYuShiner/" target="_blank">gitee</a>&nbsp;or
                    &nbsp;<a href="https://github.com/fenyuluoshang/" target="_blank">github</a>
                </h3>
            </div>
        </div>
        <div class="panel panel3">
            <div class="main">
                <div class="title">
                    什么是新前端？<br>
                    与传统前端有那些不同？
                </div>
                <div class="continue">
                    <ul>
                        <li>前后端分离</li>
                        <li>通过异步请求代替传统后端渲染</li>
                        <li>jQuery</li>
                        <li>React / Angular / Vue</li>
                        <li>后端不用管前端事，前端也不用管后端，前后端根据接口文档同步进行，开发周期短</li>
                        <li>前端可以更加专注和简洁的开发、模块化开发</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="panel panel4">
            <div class="main">
                <div class="title">
                    预编译式的语法糖
                </div>
                <div class="item">
                    既然前后端已经可以分离了，前端的开发也会可以变得更加合理和科学。
                </div>
                <div class="continue">
                    <div class="card">
                        <h2>预编译样式语法糖</h2>
                        <p>
                            sass less等需要预编译的样式，示例以scss(sass)做演示
                        </p>
                        <button data='demo-scss' class="button">demo</button>
                        <a href="https://sass-lang.com/guide" target="_block" data='doc-scss' class="button">doc</a>
                    </div>
                    <div class="card">
                        <h2>预编译js语法糖</h2>
                        <p>
                            typescript kotlin等可以使开发变得更加合理的语法糖，示例以typescript做演示
                        </p>
                        <button data='demo-ts' class="button">demo</button>
                        <a href="https://www.tslang.cn/docs/home.html" target="_block" data='demo-ts'
                            class="button">doc</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel5">
            <div class="title">使用语法糖后我们可以通过webpack来打包编译所有需要编译的内容</div>
            <a href="https://webpack.github.io/" target="_block">
                <div class="center"></div>
            </a>
        </div>
        <div class="panel panel6">
            <div class="bg"></div>
            <div class="title">React \ Vue \ Angular</div>
            <div class="item">我们继续更近一步，我们甚至可以不需要html，内容都由js来渲染</div>
            <div class="item">那么如果我们把一组html变成一个组件，面向组件开发，会发生什么</div>
            <div class="line">尽可能的摆脱 ctrl+c ctrl+v 式开发</div>
            <div class="line"><a href="https://codepen.io/FenyuShiner/pen/OGEeEz" target="_block">一个react 渲染 demo</a>
            </div>
            <div class="continue">
                <div class="card"></div>
                <div class="card"></div>
                <div class="card"></div>
            </div>
        </div>
        <div class="panel panel7">
            <div class="title">nodejs</div>
            <a href="https://nodejs.org/" target="_block">
                <img class="logo"></img>
            </a>
            <div class="continue">
                nodejs是一个可以脱离浏览器运行的js运行环境<br>
                nodejs与浏览器js最大的不同是没有了dom对象和一些html特征对象，但是新增了依赖管理<br>
                nodejs总能兼容最高版本的javascript，不需要担心版本兼容性<br>
                nodejs的类库提供了监听端口响应http请求的能力，也就是我们可以使用js来做服务器了<br>
                nodejs可以使用python2.7和C++制作依赖，例如node-sass
            </div>
        </div>
        <div class="panel panel8">
            <h2>近代Javascript新增特性</h2>
            <div>
                <div class="group">
                    <a href="http://www.ecma-international.org/ecma-262/6.0/" target="_block">
                        <h2 class="title">ES6</h2>
                    </a>
                    <ul>
                        <li>
                            <div class="item">
                                <h4>let\const</h4>
                                <p>
                                    let 接近于 var 但是比var更具安全性，只作用于块级区域<br>
                                    const 用于定义常量
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="item">
                                <h4>set\map</h4>
                                <p>
                                    set是一个键值列表，内容不会出现重复（类似java中的HashSet）<br>
                                    map是一个类似于js对象或者java中的hashmap的存储方式
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="item">
                                <h4>proxy</h4>
                                <p>代理对象，建立在其他任意对象基础上（包括原生对象、对象、其他代理），用于拦截请求，转发或直接返回结果</p>
                            </div>
                        </li>
                        <li>
                            <div class="item">
                                <h4>promise</h4>
                                <p>诺言，异步对象，使用.then(callback : function)回调执行，catch捕捉失败对象</p>
                            </div>
                        </li>
                        <li>
                            <div class="item">
                                <h4>async</h4>
                                <p>async 和 await 是利用协程机制处理Promise对象的关键字，async用在function头部</p>
                            </div>
                        </li>
                        <li>
                            <a href="https://codepen.io/FenyuShiner/pen/zXaEmM" target="_block">a demo for async &
                                promise</a>
                        </li>
                    </ul>
                </div>
                <div class="group">
                    <h2 class="title">ES7,ES8</h2>
                    <ul>
                        <li>
                            <div class="item">
                                <h4>Array.prototype.includes(value : any)</h4>
                                <p>与.includes方法相似但
                                    includes()能否发现NaN，而indexof()不能<br>
                                    [NaN].includes(NaN)；<br>
                                    结果为true。<br>
                                    此外includes方法不会区分+0和-0.也就是说<br>
                                    [-0].includes[+0]<br>
                                    结果仍然为true。
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="item">
                                <h4>取幂运算符 x**y</h4>
                                <p>等价与Math.pow(x,y)</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div id="dialog" style="display:none">
        <div id="dialogbg"></div>
        <div id="dialogcenter"></div>
    </div>
</body>

</html>